<template>
  <div class="feature view">
    <div class="content">
      <div class="card-box">
        <div
          class="card-item"
          v-for="item in list"
          :key="item.key">
          <div class="card-content flex">
            <img class="card-icon" :src="`/images/feature/card-icon-${item.key}.png`" alt="">
            <div class="right">
              <img class="card-text" :src="`/images/feature/card-text-${item.key}.png`" alt="">

              <div v-if="item.key === 'first'">
                <div class="msg">1. 在线预约</div>
                <div class="msg">2. 家庭访问咨询</div>
                <div class="msg">3. 选择合适的育婴员</div>
                <div class="msg">4. 育婴员培训</div>
                <div class="msg">5. 育婴员考核</div>
                <div class="msg">6. 服务跟踪与回访</div>
              </div>
              <div v-else class="msg">{{ item.text }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="common-footer">
      <app-footer />
    </div>
  </div>
</template>

<script setup>

const list = [
  { key: 'first' },
  { key: 'two', text: '我们坚信，面对孩子只有父母才是育儿专家。我们希望父母可以深度参与到我们的各个环节当中，这样不仅可以促进整个家庭服务体系的建立，也可以使得父母更有参与感，从带娃生活中而获得更多的乐趣和价值。' },
  { key: 'third', text: '我们深知，孩子给你带来无比乐趣的同时，也会增添很多麻烦，忙碌的你根本有太多没的时间去解决这些问题，因此，我们要帮您争取时间，同时，也要让我们的服务更契合您的生活。比如：我们的家长休憩时光、宝宝生日party、宝宝用品的蚂蚁市集等。' },
  { key: 'four', text: '我们将为育婴员提供持续的生活和工作指导，开放更多员工宿舍，奖励并吸纳优秀人才。我们确保她们享有丰厚福利，并提供晋升机会以激励其成长。在服务期间，我们持续跟踪，保障她们的健康、生活质量和专业水平。\n' },
]
</script>

<style lang="less" scoped>
.content {
  height: 16.97rem;
  background: linear-gradient(#EAE7E1 0%, #F6F5F2 100%);
  position: relative;

  .card-box {
    position: absolute;
    top: 1.55rem;
    left: 3.7rem;

    .card-item {
      width: 12rem;
      height: 3.21rem;
      background: url('/images/feature/bg.png') no-repeat;
      background-size: 100% 100%;
      position: relative;
      margin-bottom: .4rem;

      .card-content {
        position: absolute;
        left: .78rem;
        top: 50%;
        transform: translateY(-50%);

        .card-icon {
          width: 1.48rem;
          height: 1.48rem;
          margin-right: 1.3rem;
        }

        .right {
          .card-text {
            height: .41rem;
            width: auto;
            display: block;
            margin-bottom: .23rem;
          }

          .msg {
            width: 5.8rem;
            color: #333333;
            font-size: .14rem;
            line-height: .25rem;
            font-weight: 400;
          }
        }
      }

    }
  }
}
</style>
